<!doctype html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>风飘絮论坛</title>

    <!-- Bootstrap -->
    <!-- 头部图片 -->
    <link rel="icon" type="image/x-icon" href="./img/willow.png"/>
    <link rel="stylesheet" href="./css/bootstrap.min.css" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--    &lt;!&ndash;[if lt IE 9]>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
<!--    <![endif]&ndash;&gt;-->
<!--    <script src="./js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <script src="./js/vue-router.js" type="text/javascript" charset="UTF-8"></script>-->
    <!-- <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="app"
     style="padding-top: 10%;height: 900px;background-size: 100% 100%;background-repeat: no-repeat; background-image: url(./img/ae33648fd7b2966d66cfd2492dd59b8f.jpeg)">

    <div style="width: 300px;background-size: 100% 100%;background-repeat: no-repeat; margin: 0 auto;background-image: url(./img/willow.png) ">


        <form class="loginForm" id="login" name="login">
            <div class="modal-body">

                <div class="form-group">
                    <label for="names" class="control-label">用户名:</label>
                    <div style="width: 240px;">
                        <input v-model="loginData.name" type="text" class="form-control" name="name" id="names"
                               placeholder="请输入用户名"
                               required/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="ppwd" class="control-label">密码</label>
                    <div style="width: 240px;">
                        <input type="password" v-model="loginData.pwd" class="form-control" name="pwd" id="ppwd"
                               placeholder="请输入密码"  required/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="codeimg">点击切换</label>
                    <img id="codeimg" v-bind:src="checkcodeImgUrl" @click="changeImg"/>
                </div>

                <div class="form-group">
                    <div style="width: 240px;">
                        <label for="code" class="form-label">验证码</label>
                        <input id="code" class="form-control" name="code" type="text" v-model="loginData.checkcode"
                               placeholder="验证码" required/>
                    </div>
                </div>
                <input type="checkbox" v-model="loginData.saveme"/> <label>记住我</label>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" style="width:100%;"
                        onclick="javascrtpt:window.location.href='door2.html'">主页
                </button>
                <!--若当前button提交按钮在form标签外部，需要使用form属性对form标签进行关联-->

                <input @click="loginBtn" value="登 录" form="login"
                       style="margin-top: 10px;height: 50px;width:100%;background-color: #8d8dec" type="button">
            </div>
            <div style="margin: 0 auto;color: red " id="info" v-text="errorInfo"></div>
        </form>
    </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript" src="./js/jquery.js" ></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="./js/bootstrap.min.js" ></script>
<!-- 加载vue文件 -->
<script type="text/javascript" src="js/v2.6.10/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--<script type="text/javascript" src="./js/axios.min.js"></script>-->
<script>
    new Vue({
        el: "#app",
        data: {

            loginData: {
                saveme: false,

            },
            // 验证码、
            checkcodeImgUrl: "./user/getCheckCode.action",
            //数据库返回的错误信息
            errorInfo: ""
        },
        methods: {
            // 登录功能
            loginBtn() {
                console.log(this.checkcodeImgUrl + "????")
                // post方法会自动将参数的vue数据模型对象转换为json数据，发送给服务器
                axios.post("./user/login.action", this.loginData).then(response => {
                    // 将返回的登录验证信息数据赋值给
                    this.errorInfo = response.data.message;
                    // 判断当前的登录状态码，如果为0，表示登录成功
                    if (response.data.type === 0) {
                        console.log(123);
                        setTimeout(function () {

                            window.location.href = "door2.html";
                        }, 1000);
                    }
                }).catch(function(error){
                    alert("请求失败："+error);
                })
            },
            // 切换验证码
            changeImg() {
                this.checkcodeImgUrl = './user/getCheckCode.action?' + Math.floor(Math.random() * 10 + 1);
                console.log(this.checkcodeImgUrl)
            }
        }
    })
</script>

</body>
</html>
